<template>
   <!-- 条件查询的按钮 -->
   

 <table>
  <tr>
    <td  width="500px">
      <el-row class="demo-autocomplete">
      <el-col :span="12">
        <el-autocomplete
          class="inline-input"
          v-model="state2"
          :fetch-suggestions="querySearch"
          placeholder="请输入要查询的商品"
          :trigger-on-focus="false"
          clearable
          width="150px"
          @select="handleSelect"
        ></el-autocomplete>
  </el-col>
</el-row>
    </td>
    <td>
     
      <el-button type="success" @click="open = true"> <el-icon><Search /></el-icon> 搜索</el-button>
    </td>
  </tr>
 </table>

 <!-- 数据展示 -->
 <div>
  <el-table
    :data="waresDTO"
    style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.spuName }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.vender }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.categoryName }}</span>
          </el-form-item>
          <el-form-item label="商品的库存">
            <span>{{ props.row.stock }}</span>
          </el-form-item>
          <el-form-item label="商品状态">
            <span>{{ props.row.status }}</span>
          </el-form-item>
          <el-form-item label="商品图片">
            <img :ref="props.row.img"/>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.description }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品标题"
      prop="title">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="spuName">
    </el-table-column>
    <el-table-column
      label="商品价格"
      prop="price">
    </el-table-column>
    <el-table-column
      label="是否上架"
      prop="status">
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="150">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="modifyWorkOrderdown(scope.row)"
            >
              下架
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="modifyWorkOrder(scope.row)"
            >
              上架
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="removeWorkOrder(scope.row)"
            >
              下单
            </el-button>
          </template>
        </el-table-column>
  </el-table>
    </div>
    <!-- 分页控件 -->
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageIndex"
        v-model:page-size="pageSize"
        :page-sizes="[1, 2, 3]"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </div>
   
 </template>
 
 <script >
 export default {
  data() {
    return {
      serveWorkOrderDTO: {
        pname: "",
      },
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      pages: 0,
      waresDTO: [],

      restaurants: [],
       arr:[],
      state2: ''

    };
  },
  mounted() {
     //列表匹配
     this.loadAll();
      this.findWares();
     
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {

          return (restaurant.title.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        //value是搜索的匹配的
        // var arr=[];
        this.$axios.get("http://localhost:6066/wares/spu/").then(resp=>{
              if(resp.data.code == 200){
                this.restaurants = resp.data.data;
                console.log("查询",resp.data.data);
              }
        });
        console.log("restaurants=",this.restaurants);
        // return this.restaurants;
        // return [
        //   { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
        //   { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
        //   { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        //   { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
        // ];
      },
      handleSelect(item) {
        console.log(item);
      },
    
    //查找全部商品
    findWares(){
      console.log("pageindex="+(this.pageIndex-1),"pageSize="+this.pageSize);

      this.$axios.get(
        "http://localhost:6066/waresSku/"+(this.pageIndex-1)*this.pageSize+"/"+this.pageSize
      ).then(resp=>{
          if(resp.data.code == 200){
            this.waresDTO=resp.data.data.records;
            this.total=resp.data.data.total;
            this.pages= resp.data.data.pages;
          }
      });
    },

    //下单
    removeWorkOrder(row) {
      console.log("即将下单，下单{}",row);
      if(row.status !== 1  || row.stock <= 0){
        this.$message({
          message: '不可下单',
          type: 'warning'
        });
      }else{
        this.$axios.post("order/",
        {"skuId":row.skuId,
          "price":row.price
        }
          ).then(resp=>{
              this.findWares();
                 this.$message({
                    message: resp.data.data,
                    type: 'success'
                }); 
        });
      }
    },
    //上架方法
    modifyWorkOrder(row) {
      console.log(row);
      this.$axios.put("http://localhost:6066/waresSku/up/"+row.skuId).then(resp=>{
                 this.$message({
                    message: '上架成功',
                    type: 'success'
                }); 
      });
      this.findWares();
    },
    //下架方法
    modifyWorkOrderdown(row) {
      console.log(row);
      this.$axios.put("http://localhost:6066/waresSku/down/"+row.skuId).then(resp=>{
                 this.$message({
                    message: '下架成功',
                    type: 'success'
                }); 
      });
      this.findWares();
    },

    //条件查询服务人员
    queryWorkOrder() {
      // this.getAll();
    },

    //重置条件查询
    resetWorkOrder() {
      this.pageIndex = 1;
      this.pageSize = 3;
      this.getAll();
    },
    //每页显示几条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findWares();
    },

    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.findWares();
    },
  },
};
//  import { computed, onMounted, ref } from 'vue'
//  import  {getcategory} from "@/api/wares/ware"

//  const tableData=[]
// //Mounted
//  onMounted(()=>{
//    //查找分类
//    getcategory().then(resp=>{
//          if(resp.data.code == 200){
//             tableData.value=resp.data.data;
//             console.log(tableData);
//          }
//          });
//  });
   
 
 </script>
 